<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Iframe Title</title>
<meta charset=utf-8 />
<style type="text/css">
<!--
body {
-moz-box-shadow: 4px 4px 5px #888;
-webkit-box-shadow: 4px 4px 5px #888;
box-shadow: 4px 4px 5px #888;
}
-->
</style>
</head>
<body onload=sendSize() style='padding:5px;border-radius:10px;border:2px solid lightblue;background-color:transparent;margin:0;font-family:arial'>
<div id=containerDiv style=background:orange>

<table style='width:300px;'>
<tr>
<td>
<table style='width:100%;background-color:gainsboro'>
<tr ><td id=editIsaTopTable style='width:90%;background-color:orange' align=center><span id=editIsaEditSpan>Edit ISA Symbol</span> </td><td align=right> <button onClick=parent.closeEditIsa()  >X</button></td></tr>
</table>
</td>

</tr>


<tr>
<td align=center >Scale: <input  onmousedown="parent.ScaleIsa=true" onmouseup="parent.ScaleIsa=false" onmousemove="parent.scaleIsa(this.value)" id=scaleRangeValue style=width:150px type="range" value=1.0  min=".1" step=.05 max="2"> <input style=width:40px id=scaleValue type="text" value=1.0 />

<br><br>
<div id=pidColorBg  >P&amp;ID Color:<select id="pidColorSelect" onChange=parent.pidColorSelected()></select>
Opacity:<select onChange=parent.pidFillOpacitySelected()  id="pidFillOpacitySelect">
<option>.1</option>
<option>.2</option>
<option>.3</option>
<option>.4</option>
<option>.5</option>
<option>.6</option>
<option>.7</option>
<option>.8</option>
<option>.9</option>
<option selected >1</option>


</select>
</div><br>



Shadow:<input id=editIsaShadowCheck onClick=parent.editIsaShadowChecked() type="checkbox" />

</td>
</tr>
<tr>
	<td valign=bottom align=center>Rotate
		&nbsp;&nbsp;<button  onClick=parent.rotateIsaAdjust(-1) style='height:25px;width:25px;padding:0px'><img width=20 height=20 src="../Images/minusRound.png" /></button>
		<select title="rotate toggle value" id=rotateEditIsaAdjustSelect >
		<option>.5</option>
		<option>1</option>
		<option>2</option>
		<option selected>5</option>
		<option>10</option>
		</select>
		<button onClick=parent.rotateIsaAdjust(1)   style='height:25px;width:25px;padding:0px'><img width=20 height=20 src="../Images/plusRound.png" /></button>
		&nbsp;<input id=adjustedRotateIsaValue disabled type=text style='width:40px;' value=0 />&deg;
	</td>
</tr>
<tr id=flipTR  align=center><td><button title="Flip Across X" onClick=parent.flipIsaX()>Flip X</button> <button title="Flip Across Y" onClick=parent.flipIsaY()>Flip Y</button></td></tr>



<tr align=center>
<td>
	<button id=editIsaCancelButton  title='cancel component edits' onClick=parent.cancelDrawEditIsa()>cancel</button>
	<button style= id=editIsaCopyButton title='Toggle for each copy of this symbol' onClick=parent.copyEditIsa()>copy</button>
	<button id=editIsaTopButton style=background:white;font-size:120%;font-weight:bold;color:maroon;  title='Move to top' onClick=parent.topEditIsa()>&#x21E7;</button>
	<button id=editIsaBotButton style=background:white;font-size:120%;font-weight:bold;color:maroon;   title='Move to bottom' onClick=parent.botEditIsa()>&#x21E9;</button>

    <button style='background-color:red;' id=editIsaDeleteButton  onClick=parent.removeCurrentDrawIsa()>delete</button>

    <button id=editIsaFinishButton  onClick=parent.finishEditIsa()>finish</button>
</td>
</tr>

</table>

</div>


</body>
<script>

function writePidColorSelection()
{
   var DrawColors=parent.clrArray
	for(var k=0;k<DrawColors.length;k++)
	{
		var name=DrawColors[k][0]
		var myColor=DrawColors[k][1]
		var option=document.createElement("OPTION")
		option.style.backgroundColor=myColor
		option.value=myColor
		option.title=name+" "+myColor
                if(parent.hexString.indexOf(myColor)!=-1)
        option.style.color="white"
		option.text=k
       pidColorSelect.appendChild(option)




	}
	pidColorSelect.selectedIndex=2
	var clr=pidColorSelect.options[pidColorSelect.selectedIndex].value
	pidColorBg.style.backgroundColor=clr
}


function sendSize()
{
     writePidColorSelection()

   var width=containerDiv.scrollWidth+15
   var height=containerDiv.scrollHeight+30

   parent.sizeFrame('editElemIsa',width,height)



        parent.setEditIsa()


}


</script>
</html>